<template>
  <div>
    <form @submit.prevent="generateTable">
      <div>
        <label for="rows">行数 (n):</label>
        <input type="number" id="rows" v-model.number="form.rows" min="1">
      </div>
      <div>
        <label for="cols">列数 (m):</label>
        <input type="number" id="cols" v-model.number="form.cols" min="1">
      </div>
      <div>
        <label for="borderWidth">边界宽度:</label>
        <input type="number" id="borderWidth" v-model.number="form.borderWidth" min="0">
      </div>
      <div>
        <label>是否显示行间隔色:</label>
        <label>
          <input type="radio" name="rowIntervalColor" value="yes" v-model="form.rowIntervalColor"> 是
        </label>
        <label>
          <input type="radio" name="rowIntervalColor" value="no" v-model="form.rowIntervalColor"> 否
        </label>
      </div>
      <div>
        <label>是否显示列间隔色:</label>
        <label>
          <input type="radio" name="colIntervalColor" value="yes" v-model="form.colIntervalColor"> 是
        </label>
        <label>
          <input type="radio" name="colIntervalColor" value="no" v-model="form.colIntervalColor"> 否
        </label>
      </div>
      <div>
        <label for="startRow">合并起始行 (a):</label>
        <input type="number" id="startRow" v-model.number="form.merge.startRow" min="1">
      </div>
      <div>
        <label for="startCol">合并起始列 (b):</label>
        <input type="number" id="startCol" v-model.number="form.merge.startCol" min="1">
      </div>
      <div>
        <label for="endRow">合并结束行 (c):</label>
        <input type="number" id="endRow" v-model.number="form.merge.endRow" min="1">
      </div>
      <div>
        <label for="endCol">合并结束列 (d):</label>
        <input type="number" id="endCol" v-model.number="form.merge.endCol" min="1">
      </div>
      <button type="submit">生成表格</button>
    </form>
    <button @click="hebin">合并</button>
    <table :style="{ border: form.borderWidth + 'px solid black' }">
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td
            v-for="(cell, colIndex) in row"
            :key="colIndex"
            :colspan="cell.colspan"
            :rowspan="cell.rowspan"
            :style="{
            backgroundColor: getCellBackgroundColor(rowIndex, colIndex),
            border: form.borderWidth + 'px solid black'
          }"
        >
          {{ rowIndex + 1 }} - {{ colIndex + 1 }}
        </td>
      </tr>
    </table>
    {{tableData}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        rows: 3,
        cols: 3,
        borderWidth: 1,
        rowIntervalColor: 'no',
        colIntervalColor: 'no',
        merge: {
          startRow: 1,
          startCol: 1,
          endRow: 1,
          endCol: 1
        }
      },
      tableData: []
    };
  },
  methods: {
    generateTable() {
      const { rows, cols, merge } = this.form;
      this.tableData = Array.from({ length: rows }, (_, rowIndex) =>
          Array.from({ length: cols }, (_, colIndex) => ({
            colspan: 1,
            rowspan: 1
          }))
      );

      console.log(this.tableData)

      if (merge.startRow <= merge.endRow && merge.startCol <= merge.endCol) {
        for (let r = merge.startRow - 1; r < merge.endRow; r++) {
          for (let c = merge.startCol - 1; c < merge.endCol; c++) {
            if (r === merge.startRow - 1 && c === merge.startCol - 1) {
              this.tableData[r][c].colspan = merge.endCol - merge.startCol + 1;
              this.tableData[r][c].rowspan = merge.endRow - merge.startRow + 1;
            } else {
              // this.tableData[r][c].colspan = 0;
              // this.tableData[r][c].rowspan = 0;
            }
          }
        }
      }



      // this.tableData.forEach((item) => {
      //   item.forEach((row) => {
      //     console.log(row)
      //   })
      // })
    },
    hebin() {
      const { rows, cols, merge } = this.form;
      if (merge.startRow <= merge.endRow && merge.startCol <= merge.endCol) {
        for (let r = merge.startRow - 1; r < merge.endRow; r++) {
          for (let c = merge.startCol - 1; c < merge.endCol; c++) {
            if (r === merge.startRow - 1 && c === merge.startCol - 1) {
              this.tableData[r][c].colspan = merge.endCol - merge.startCol + 1;
              this.tableData[r][c].rowspan = merge.endRow - merge.startRow + 1;
            }
          }
        }
      }

      // 合并几行 就要删除 行 - 1 个列
      const lie = merge.endRow - 1; // 2 - 1 = 1
      for (let i = 1; i <= lie; i++) {
        this.tableData[merge.startRow].splice(0, 1);
      }
      // for (let i = merge.startRow; i < merge.endRow; i++) {
      //   this.tableData[i].splice(0, 1);
      // }

    },
    getCellBackgroundColor(rowIndex, colIndex) {
      const { rowIntervalColor, colIntervalColor } = this.form;

      let backgroundColor = 'gray';
      if (rowIntervalColor === 'yes') {
        backgroundColor = rowIndex % 2 === 0 ? 'gray' : 'yellow';
      }

      if (colIntervalColor === 'yes') {
        backgroundColor = colIndex % 2 === 0 ? 'gray' : 'yellow';
      }

      return backgroundColor;
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
  padding: 8px;
}
</style>
